import { Button, Switch, Tooltip, Tag } from 'antd'
import type { ColumnProps } from 'antd/lib/table'
import { Table } from '@/desktop/components'
import services from '@/services'
import type { AutoTransferRule } from '@/services/features/auto-transfer'
import './Content.module.less'

import Edit from './Edit'

export default function AutoTransfer() {
  const [editing, setEditing] = useState<true | AutoTransferRule | null>(null) // true: 新增  rule: 编辑
  const [loading, setLoading] = useState(false)
  const [rules, setRules] = useState<AutoTransferRule[]>([])

  const load = useCallback(() => {
    setLoading(true)
    void services.features.autoTransfer.getRules().then(res => {
      setLoading(false)
      setRules(res)
    })
  }, [])

  const switchRule = useCallback(
    async (id: number, enable: boolean) => {
      await services.features.autoTransfer.enableRule(id, enable)
      load()
    },
    [load],
  )

  const removeRule = useCallback(
    async (id: number) => {
      await services.features.autoTransfer.removeRule(id)
      load()
    },
    [load],
  )

  const startAdd = useCallback(() => setEditing(true), [])
  const startEdit = useCallback((rule: AutoTransferRule) => setEditing(rule), [])
  const finishEdit = useCallback(() => {
    setEditing(null)
    load()
  }, [load])

  useEffect(() => {
    load()
  }, [load])

  const columns: ColumnProps<AutoTransferRule>[] = [
    {
      title: '转发客户标签',
      render(_, record) {
        return <div styleName="tags">
          {record.tags.map(tag => <Tag key={tag.id}>{tag.name}</Tag>)}
        </div>
      },
    },
    {
      title: '接收转交账号',
      render(_, record) {
        const node = <div styleName="accounts">
          {record.accounts.map(account => <span key={account.id}>{account.name}</span>)}
        </div>
        return <Tooltip title={node}>{node}</Tooltip>
      },
    },
    {
      title: '启用',
      width: 120,
      align: 'center',
      render(_, record) {
        const onSwitch = async () => switchRule(record.id, !record.enable)
        return <Switch
          checkedChildren="开"
          unCheckedChildren="关"
          checked={record.enable}
          onChange={onSwitch}
        />
      },
    },
    {
      title: '操作',
      width: 200,
      render(_, record) {
        return <div styleName="actions">
          <a onClick={() => startEdit(record)}>编辑</a>
          <a styleName="delete" onClick={async () => removeRule(record.id)}>
            删除
          </a>
        </div>
      },
    },
  ]

  return <main styleName="wrap">
    <header>
      <Button type="primary" onClick={startAdd}>
        新建转交规则
      </Button>
    </header>

    <section>
      <Table
        columns={columns}
        loading={loading}
        dataSource={rules}
        rowKey="id"
        pagination={false}
      />
    </section>

    <Edit
      visible={editing !== null}
      rule={editing === true ? null : editing}
      rules={rules}
      onFinish={finishEdit}
    />
  </main>
}
